<template>
	<view class="wrap">
		<!-- 3验证码框 -->
		<u-popup v-model="show" mode="top" class="flex flex-col justify-center items-center" height="50%">
			<u-message-input :focus="true" :dot-fill="true" :breathe="true" @finish="finish" 
				:value="code">
			</u-message-input>
		</u-popup>

		<!-- 2、数字键盘 -->
		<u-keyboard ref="uKeyboard" mode="number" :mask="false" tips="请输入手机验证码" v-model="show"
			@change="valChange" @backspace="backspace"></u-keyboard>
		<!-- 1-3、提示消息-》请输入验证码 -->
		<u-toast ref="uToast"></u-toast>
		<!-- 1-2、发送验证码-》验证码倒计时 -->
		<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
		</u-verification-code>
		<!-- 1-1、显示按钮，当父级组件传递来的号码符合标准时可以点击该按钮 -->
		<u-button @tap="getCode" type="warning" :disabled="showButton">{{tips}}</u-button>
	</view>
</template>

<script>
	export default {
		props: {
			mobile: {
				type: Number,
				required: true,
				validator: function(value) {
					if (/^1\d{10}$/.test(value)) {
						uni.showToast({
							title: '输入成功',
							duration: 500
						});
						return true;
					}
				}
			}
		},
		watch: {
			mobile(n) {
				if (/^1\d{10}$/.test(n)) {
					this.showButton = false
				} else {
					this.showButton = true
				}
			}
		},
		data() {
			return {
				showButton: true,
				seconds: 5,
				tips: '请输入验证码',
				show: false,
				// refCode: null,
				code: ''
			}
		},
		methods: {
			change() {
				this.show = true
			},
			/**VerificationCode的方法
			 * @param {Object} text
			 */
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				//在这里获取到得到的手机号，然后发送网络请求，等返回来数据后，在清除定时器
				if (this.mobile) {
					console.log(this.mobile)
				}
				//
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
// ########3发送网络请求，通知系统向号码发送短信，号码不存在报错
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 500);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			// verification结束动效
			end() {
				// 结束倒计时触发
				// this.show = false;
				this.$u.toast('已超时，请重新发送');
			},
			// verification开始动效
			start() {
				// 开始倒计时触发
				this.show = true
				this.$u.toast('请输入手机验证码');
			},

			/**VerificationCode的方法
			 * @param {Object} 
			 */
			// messageinput
			finish(e) {
				// 将e得到的值赋值给父级。
				this.$u.toast('输入完毕');
				// console.log('输入结束，当前值为：' + e);
			},
			valChange(val) {
				if(this.code.length<4){
					this.code += val;
				}else if(this.code.length==4){
// ########4根据验证码填入数据，并发送给后台，开始发送发送网络请求，请求成功跳转到下一步，进一步修改密码失败返回并提示
				}
				console.log(this.code);
			},
			backspace() {
				// 删除value的最后一个字符
				if (this.code.length) this.code = this.code.substr(0, this.code.length - 1);
				console.log(this.code);
			}
		}
	}
</script>

<style>

</style>
